"use client";

import { MainContext } from "@/src/providers/MainProvider";
import {
  Box,
  Button,
  Flex,
  SimpleGrid,
  GridItem,
  Image,
} from "@chakra-ui/react";
import { useContext, useState } from "react";
import HomePage from "./HomePage";
import LinkStatus from "../base/LinkStatus";
import ProductCard from "../base/ProductCard";

import Product from "../base/Product";

function Start() {
  const [step, setStep] = useState(0);
  const [wellcome, setWellcome] = useState(true);
  const [connectMouse, setConnectMouse] = useState("");
  const [api, setApi] = useState<HIDDevice>();

  const initMouse = async () => {
    setStep(2);
    // const api = await init();
    if (api) {
      setConnectMouse(api.productName);
      setStep(3);
      setApi(api);
    } else {
      setStep(1);
    }
  };

  const connected = () => {
    // setMouse({api: api});
  };

  return wellcome ? (
    <HomePage />
  ) : (
    <section className="text-center font-medium bg-lw-snuff-100 h-screen flex flex-col justify-between">
      <div>
        <Box className="pt-12">
          <LinkStatus step={step} />
        </Box>
        <h2 className="text-4xl pt-16 pb-2">允许浏览器连接到设备</h2>
        <p className="py-2 text-lg ">
          点击下方按钮，您的浏览器会在地址栏下方弹出一个对话框（如操作示例中所示）。在列表中点击设备名称以选择设备，然后点击“连接”。
        </p>
        <div className="flex flex-col justify-center gap-3 py-4">
          {connectMouse == "" ? (
            <>
              <Flex gap={"2rem"} w={"fit-content"} margin={"0 auto"}>
                <Button className="new-btn !px-8" onClick={() => initMouse()}>
                  连接设备
                </Button>
                <Button className="new-btn !px-8" onClick={() => {}}>
                  演示模式
                </Button>
              </Flex>
            </>
          ) : (
            <div>
              <ProductCard />
              <div className="my-2">
                <Button
                  size={"sm"}
                  colorScheme="red"
                  onClick={() => connected()}
                >
                  进入设置
                </Button>
              </div>
            </div>
          )}
        </div>
        <div className="w-[700px]  mx-auto bg-lw-snuff-200 py-6 px-[100px] rounded-lg text-left">
          <div className="text-3xl pb-4 hidden">操作示例</div>
          <div className="border border-zinc-800 bg-gray-700/30 rounded-2xl px-10 py-4">
            <div className="py-2 text-lg">想要连接到你的设备</div>
            <ul className="h-[100px] border border-zinc-800 bg-gray-700/40 rounded-lg overflow-hidden">
              <li className="px-4 py-2 text-lg bg-gray-500/20">Test Mouse</li>
            </ul>
            <div className="flex justify-end gap-2 pt-8">
              <div className="px-3 py-1.5 rounded bg-zinc-200 text-stone-700">
                取消
              </div>
              <div className="px-3 py-1.5 rounded bg-stone-200 text-stone-700">
                连接
              </div>
            </div>
          </div>
        </div>
        <div className="px-8 py-4 mb-4 rounded-md bg-gray-700/30 w-[500px] mx-auto flex items-center gap-2">
          <svg
            className="w-5"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="25981"
            width="32"
            height="32"
          >
            <path
              d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m-42.666667-298.666667v85.333333h85.333334v-85.333333h-85.333334z m0-341.333333v256h85.333334V298.666667h-85.333334z"
              p-id="25982"
              fill="#bfbfbf"
            ></path>
          </svg>
          <span className="text-gray-300">
            您的设备没有显示出来吗？ 请重新插拔一下，然后重试。
          </span>
        </div>
      </div>
      <div className="flex-1 flex flex-col">
        <div className="wave-area">
          <div className="wave"></div>
          <div className="wave"></div>
        </div>
        <div className="bg-white flex-1"></div>
      </div>
    </section>
  );
}

export default Start;
